import React, { useEffect, useState } from 'react';
import { Layout, Steps } from 'antd';
import styles from './index.less';
import { history } from 'umi';
import Cookies from 'js-cookie';

const { Sider } = Layout;
const { Step } = Steps;

function __layout(props: any) {

  const authUrl = `http://huntian.hzins.com/login?redirectUrl=${encodeURIComponent(window.location.href)}`;
  // 跳到授权
  if (!Cookies.get('token'))
    window.location.href = authUrl;

  const [curStep, setCurStep] = useState<number>(0);
  const handleStepChange = (val: number) => {
    setCurStep(val);
    const paths: string[] = [
      '/athene/build-p',
      '/athene/publish',
      '/athene/after-publish'
    ];
    history.push({
      pathname: paths[val]
    });

  };

  const handleReceiveMessage = (msg: MessageEvent) => {
    const { step } = msg.data;
    if (Object.prototype.toString.call(step) === '[object Number]') {
      handleStepChange(step);
    }
  };

  useEffect(() => {
    window.addEventListener('message', handleReceiveMessage);
    return () => window.removeEventListener('message', handleReceiveMessage);
  }, []);

  return (
    <div className={styles.wrap}>
      <Sider className={styles.aside}>
        <p>雅典娜守护你的CICD之旅</p>
        <div className={styles.stepContent}>
          <Steps direction="vertical" className={styles.step} current={curStep} >
            <Step title={<span className={styles.whiteText}>构建P版</span>} />
            <Step title={<span className={styles.whiteText}>发布阶段</span>} />
            <Step title={<span className={styles.whiteText}>发布后</span>} />
          </Steps>,
        </div>
      </Sider>
      <div className={styles.content}>

      </div>
      {props.children}
    </div>
  );
}

export default __layout;